<template>
  <div class="bj">
    <div class="titletop">
      <div class="tleft">jrh.com&nbsp;书城</div>
      <div style="margin-right: 60px">
        <i
          class="el-icon-phone-outline"
          style="font-size: 20px; color: #ff734d"
        ></i
        >&nbsp;18842697892
      </div>
    </div>
    <div class="txdd">
      <h2 style="margin: 0px 0px 20px 0px">确认订单：</h2>
      <el-card>
        <el-card>
          <div class="dizhi" @click="xuandz">
            <div class="dizhil">
              <i class="el-icon-location-outline"></i>
            </div>
            <div class="dizhir">
              <p style="margin-bottom: 5px">fnjkfjkfjk</p>
              <p>jjjjj&nbsp;18842697892</p>
            </div>
            <div class="jt">></div>
          </div>
        </el-card>
        <el-dialog
          title="地址"
          :visible.sync="dialogVisible"
          width="40%"
        >
          <div
            style="cursor: pointer"
         
          >
            <div class="dialogr" @click="xdz(item)">
              <p style="margin-bottom: 5px">
                <i class="el-icon-location-outline" style="color: #ff451b"></i
                >&nbsp;地址啊1
              </p>
              <p>名字啊&nbsp;电话啊</p>
            </div>

            <el-divider></el-divider>
          </div>
        </el-dialog>
        <h2 style="margin: 20px 0px">核对购物清单</h2>
        <ul v-for="(item, index) in $store.state.select" :key="index">
          <li>
            <div class="qr">
              <div style="width: 50px; height: 50px; margin: 0px 20px 0px 0px">
                <img
                  :src="require(`../../assets/${item.url}`)"
                  alt=""
                  style="width: 100%; height: 100%"
                />
              </div>
              <div>
                <p style="margin-bottom: 10px">
                  你好你好&nbsp;&nbsp;我的地址是饭都大姐
                </p>
                <p style="color: #ff734c">￥&nbsp;12</p>
              </div>
            </div>
          </li>
        </ul>
        <h2 style="margin: 20px 0px">送达日期</h2>
        <div>
          <el-date-picker
            v-model="value1"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </div>
        <h2 style="margin: 20px 0px">贺卡留言</h2>
        <div>
          <el-input
            type="textarea"
            :rows="5"
            placeholder="写上您的祝福语，可附上署名"
            v-model="textarea"
            style="width: 500px"
          >
          </el-input>
        </div>
        <div class="qrdd" @click="submit">提交订单</div>
      </el-card>
    </div>
  </div>
</template>
  
  <script>
// import { getDateNums } from "../../utils/id.js";
export default {
  data() {
    return {
      tableData: [],
    //   pickerOptions: {
    //     shortcuts: [
    //       {
    //         text: "今天",
    //         onClick(picker) {
    //           picker.$emit("pick", new Date());
    //         },
    //       },
    //       {
    //         text: "昨天",
    //         onClick(picker) {
    //           const date = new Date();
    //           date.setTime(date.getTime() - 3600 * 1000 * 24);
    //           picker.$emit("pick", date);
    //         },
    //       },
    //       {
    //         text: "一周前",
    //         onClick(picker) {
    //           const date = new Date();
    //           date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
    //           picker.$emit("pick", date);
    //         },
    //       },
    //     ],
    //   },
      value1: "", //预计送达时间
      textarea: "", //留言
      mrdz: "陕西省宝鸡市岐山县", //默认地址
      mrname: "巨瑞华",
      mrphone: "18842697892",
      address: [],
      dialogVisible: false,
      pageNum: 1,
      pageSize: 10,
      total: 0,
      userInfo: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
      uuid: "",
    };
  },

  methods: {

    xuandz() {
      this.dialogVisible = true;
      this.request.get("/address").then(res => {
      this.address = res.data.data;
      })
    
    },
        // 选择地址
    xdz(item) {
        console.log(item)
      this.mrdz = item.address;
      this.mrname = item.name;
      this.mrphone = item.phone;
      this.dialogVisible = false;
    },
    order_nums() {
      var outTradeNo = ""; //订单号
      for (
        var i = 0;
        i < 6;
        i++ //6位随机数，用以加在时间戳后面。
      ) {
        outTradeNo += Math.floor(Math.random() * 10);
      }

      outTradeNo = String(new Date()) + String(outTradeNo);
      this.uuid = outTradeNo;
    },
    // 提交订单
    submit() {
        // 订单编号
      this.order_nums();

      this.$store.state.select.forEach((item) => {
        item.recipient = this.mrname;
        item.rephone = this.mrphone;
        item.readdress = this.mrdz;
        item.retime = this.value1;
        item.message = this.textarea;
        let forms = {
          sjrname: item.recipient,
          sjrphone: item.rephone,
          sjraddress: item.readdress,
          yjtime: item.retime,
          ddname: item.name,
          ddmessage: item.message,
          uid: this.userInfo.data.id,
          uname: this.userInfo.data.nickname,
          number: this.uuid,
        };
        this.request.post("/dingdan", forms).then((res) => {
          if (res.data.code === "200") {
            this.$message.success("恭喜小主，不日将拿到心爱的鲜花！");
            this.$router.push("/");
          } else {
            this.$message.error("小主！小主！下单失败啦！");
          }
        });
      });
    },
  },


};
</script>
  
  <style scoped>
.titletop {
  height: 100px;
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  box-shadow: 2px 2px 2px white;
}
.tleft {
  font-size: 30px;
  font-family: "Lucida Console", "Courier New", monospace;
  color: #ff734d;
  margin-left: 80px;
}
.txdd {
  margin: 0px 60px;
}
ul li {
  list-style: none;
}
.qr {
  background-color: #f7f9fa;
  padding: 20px;
  display: flex;
}
.qrdd {
  width: 170px;
  height: 60px;
  background-color: #ff451b;
  text-align: center;
  line-height: 60px;
  color: white;
  font-size: 20px;
  font-weight: bold;
  border-radius: 30px;
  margin: 20px 0px;
  position: relative;
  left: 1000px;
  cursor: pointer;
}
.dizhi {
  display: flex;
  cursor: pointer;
}
.dizhil {
  line-height: 50px;
  font-size: 30px;
  color: #ff451b;
  margin-right: 20px;
}
.jt {
  font-size: 30px;
  position: absolute;
  right: 120px;
  color: #b8bbbd;
}
.dialogl {
  line-height: 50px;
  font-size: 30px;
  color: #ff451b;
  margin-right: 20px;
}
.dialogr {
}
</style>